<template>
  <!-- 页眉 -->
  <div v-if="pageData.pageHeaderOption">
    <div v-if="pageData.pageHeaderOption.type === 'text'" :style="style">
      {{ pageData.pageHeaderOption.textContent }}
    </div>
    <template v-else>
      <Swipe :autoplay="3000" class="my-swipe" indicator-color="white">
        <SwipeItem
          v-for="img in pageData.pageHeaderOption.images"
          :key="img.url"
        >
          <img :src="img.url" alt="" />
        </SwipeItem>
      </Swipe>
    </template>
  </div>
  <!-- 标题和简介 -->
  <div class="survey_top m15">
    <h2 class="f20 t-center">{{ pageData.surveyName }}</h2>
  </div>
  <!-- 问题区域 -->
  <div class="survey_item mb25">
    <!-- 移动端 -->
    <template v-if="isMobile">
      <van-form>
        <van-cell-group>
          <template v-for="item in surveyList" :key="item.surveyItemId">
            <component
              :is="dom[item.itemType]"
              :item="item"
              type="view"
            ></component>
          </template>
        </van-cell-group>
      </van-form>
    </template>
    <!-- 电脑端 -->
    <template v-else>
      <ElForm label-position="top">
        <template v-for="item in surveyList" :key="item.surveyItemId">
          <component
            :is="domPc[item.itemType]"
            :item="item"
            type="view"
          ></component>
        </template>
      </ElForm>
    </template>
  </div>
  <!-- 返回上一页 -->
  <div v-if="!useQuery.id" class="m15 pc_mw150">
    <van-button block type="primary" @click="back">返回</van-button>
  </div>
</template>
<script setup>
import COMPONENTS_H5 from "@/components/components-h5/index";
import COMPONENTS_PC from "@/components/components-pc/index";
import { getFillingDetail } from "@/server/business/survey.js";
import { commonStore } from "@/stores/common.js";
import { surveyStore } from "@/stores/survey.js";
import { getUrlQuery } from "@/utils/common.js";

import { ElForm } from "element-plus";
import { storeToRefs } from "pinia";
import { Swipe, SwipeItem } from "vant";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

//defineOptions({ name: "SurveyDetail" });
const store = surveyStore();
const commons = commonStore();
const { isMobile } = storeToRefs(commons);
const { surveyInfo } = storeToRefs(store);
const useQuery = getUrlQuery(); // href获取数据
const router = useRouter();


const surveyList = ref([]);
const pageData = ref({});
const dom = COMPONENTS_H5; // 移动端的组件
const domPc = COMPONENTS_PC; // pc端的组件

// 初始化
const init = () => {
  console.log("问卷useQuery.id", useQuery.id);
  useQuery.id ? getApiData() : getStoreData();
};

// 缓存拿数据
const getStoreData = () => {
  surveyList.value = surveyInfo.value.surveyList.flat(2);
  pageData.value = surveyInfo.value.pageData;
};
// 从接口拿数据
const getApiData = () => {
  getFillingDetail({ respondId: useQuery.id }).then(({ data }) => {
    let pageFullData = JSON.parse(data.pageFullData);
    surveyList.value = pageFullData.surveyList.flat(2);
    pageData.value = pageFullData.pageData;
  });
};
// 返回
const back = () => router.back();

onMounted(() => init());
</script>
<style lang="less" scoped>
.survey_item :deep(.van-field__control--custom) {
  display: block;
}

.my-swipe :deep(.van-swipe-item) {
  color: #fff;
  height: 15rem;
  text-align: center;
  background-color: #39a9ed;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
